<template>
	<breadCrumb ref="breadcrumb" :item='item'></breadCrumb>
	<div class="table-wrapped">
		<div class="table-top">
			<div class="table-header">
				<div class="search-wrapped">
					<el-input v-model="productOutId" class="w-50 m-2" size="large" placeholder="输入出库编号进行搜索" :prefix-icon="Search"
						clearable @change="SearchProductByProductOutId" @clear="GetProductOutList" />
				</div>
			</div>
			<div class="table-content">
				<el-table :data="tableData" border style="width: 100%">
					<el-table-column type="index" width="50"></el-table-column>
					<el-table-column prop="product_name" label="产品名称" width="110" />
					<el-table-column prop="product_out_id" label="出库编号" width="100" />
					<el-table-column prop="product_out_number" label="申请数量" />
					<el-table-column prop="product_out_price" label="申请出库总价" />
					<el-table-column prop="product_out_apply_person" label="出库申请人" />
					<el-table-column prop="product_apply_time" label="申请出库时间" width="180">
						<template #default="{ row }">
							<div>{{ row.product_apply_time?.slice(0, 10) }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="product_out_audit_person" label="审核人" />
					<el-table-column prop="product_audit_time" label="审核时间" width="180">
						<template #default="{ row }">
							<div>{{ row.product_audit_time?.slice(0, 10) }}</div>
						</template>
					</el-table-column>
					<el-table-column prop="audit_memo" label="审核备注" width="200" />
				</el-table>
			</div>
		</div>
		<div class="table-footer">
			<el-pagination size="small" background :page-size="paginationData.pageSize"
				:current-page="paginationData.currentPage" :total="outTotal" layout="prev, pager, next"
				@current-change="goChangePage" />
		</div>
	</div>
</template>

<script lang="ts" setup>
import {
	ref, reactive
} from 'vue'
import breadCrumb from '../../../components/breadCrumb.vue'
import { Search } from '@element-plus/icons-vue'
import { GetProductOutListAPI, SearchProductByProductOutIdAPI, GetProductOutTotalAPI, GetProductOutListByPagerAPI } from '../../../api/product'

// 面包屑
const breadcrumb = ref()
// 面包屑参数
const item = ref({
	first: '产品管理',
	second: '出库列表'
})
// 出库编号
const productOutId = ref()
// 出库表格
const tableData = ref([])

const outTotal = ref()

const GetProductOutTotal = async () => {
	// 获取出库总数
	const res = await GetProductOutTotalAPI()
	outTotal.value = res.data.data
}
GetProductOutTotal()

// 获取第一页出库成功的产品列表
const GetProductOutList = async () => {
	// 获取出库列表
	const res = await GetProductOutListByPagerAPI(1)
	tableData.value = res.data.data
}

const goChangePage = async (page: number) => {
	paginationData.currentPage = page
	// 获取出库列表
	const res = await GetProductOutListByPagerAPI(page)
	tableData.value = res.data.data
}


// const GetProductOutList = async () => {
// 	// 获取出库列表
// 	const res = await GetProductOutListAPI()
// 	tableData.value = res.data.data
// }

GetProductOutList()

const SearchProductByProductOutId = async () => {
	// 根据出库编号搜索
	const res = await SearchProductByProductOutIdAPI(productOutId.value)
	tableData.value = res.data.data

	if (productOutId.value == '') {
		GetProductOutList()
	}
}



// 分页数据
const paginationData = reactive({
	// 每页条数
	pageSize: 5,
	// 当前所处页数
	currentPage: 1,
})

</script>

<style lang="scss" scoped>
.table-wrapped {
	padding: 8px;
	// height: calc(100vh - 101px);
	background: #f5f5f5;
	display: flex;
	flex-direction: column;
	justify-content: space-between;

	.table-top {
		// height: 100vh;
		display: flex;
		flex-direction: column;

		.table-header {
			padding: 0 24px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 48px;
			background: #fff;
		}

		.table-content {
			min-height: 10px;
			padding: 10px 20px 20px;
			margin-bottom: 8px;
			background: #fff;
		}
	}

	// .table-footer {
	// 	display: flex;
	// 	justify-content: flex-end;
	// 	background: #fff;
	// }
}

:deep(.el-table .cell) {
	font-weight: 400;
}

.search-wrapped {
	margin-top: 10px;
}
</style>